<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta charset="ISO-8859-1">
  <title>图书管理</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>

<body>

<div class="container my-2">
  <h1>书籍列表</h1>

  <a th:href="@{/showNewBookstoreForm}" class="btn btn-primary btn-sm mb-3"> 新增 </a>
  <h1  class="text-primary"></h1>


  <nav class="navbar navbar-light bg-light">
    <form id="query-form" action="/query" method="get">
      <h6 class="text-secondary">查询书籍</h6><input type="text" id="name-input" name="inpname" placeholder="书名">
      <button type="button" class="btn btn-info"onclick="queryBookstore()">搜索</button>
    </form>

    <script>
      function queryBookstore() {
        var bookname = document.getElementById("name-input").value;
        var url = "/query" + encodeURIComponent(bookname);
        window.location.href = url;
      }
    </script>
  </nav>

  <table border="1" class="table table-striped table-responsive-md">
    <thead>
    <tr>
      <th>书名</th>
      <th>书架号</th>
      <th>类型</th>
      <th> 功能 </th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="bookstore : ${listBookstore}">
      <td th:text="${bookstore.name}"></td>
      <td th:text="${bookstore.shelfnumber}"></td>
      <td th:text="${bookstore.typesof}"></td>
      <td> <a th:href="@{/showFormForUpdate/{id}(id=${bookstore.id})}" class="btn btn-primary">更新</a>
        <a th:href="@{/deleteBookstore/{id}(id=${bookstore.id})}" class="btn btn-danger">删除</a>
      </td>
    </tr>
    </tbody>
  </table>


  <div th:if = "${totalPages > 1}">
    <div class = "row col-sm-10">
      <div class = "col-sm-3">
        书籍总数: [[${totalItems}]]
      </div>
      <div class = "col-sm-5">
					<span th:each="i: ${#numbers.sequence(1, totalPages)}">
						<a th:if="${currentPage != i}" th:href="@{'/page/' + ${i}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">[[${i}]]</a>
						<span th:unless="${currentPage != i}">[[${i}]]</span>  &nbsp; &nbsp;
					</span>
      </div>
      <div class = "col-sm-1">
        <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${currentPage + 1}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">上一页</a>
        <span th:unless="${currentPage < totalPages}">Next</span>
      </div>

      <div class="col-sm-1">
        <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${totalPages}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">下一页</a>
        <span th:unless="${currentPage < totalPages}">Last</span>
      </div>
    </div>
  </div>
</div>
</body>

</html>

